<template>
  <div class="rate">
    <el-button type="primary" class="add" @click.stop="dialogFormVisible = true">新增</el-button>

    <el-dialog title="费率新增" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="开始时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.BeginTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="结束时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.EndTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="费率" :label-width="formLabelWidth">
          <el-input style="width: 100%;" v-model="form.RoyaltyRate" type="number" placeholder="大于0小于100"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>


    <el-table :data="tableData" border style="width: 100%" height="620px" :fit="true">

      <el-table-column label="序号" type="index" width="100"></el-table-column>

      <el-table-column prop="id" label="费率ID" width="200"/>

      <el-table-column prop="createUserId" label="费率创建人" width="100"/>

      <el-table-column prop="beginTime" label="费率开始时间"/>

      <el-table-column prop="endTime" label="费率结束时间"/>

      <el-table-column prop="royaltyRate" label="费率" width="200"/>

      <el-table-column prop="createTime" label="创建时间"/>

      <el-table-column prop="isActivated" label="是否有效" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.isActivated ? '有效' : '无效'}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button type="danger" @click.stop="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
  import { RoyaltyRateList, RoyaltyRateEdit ,RoyaltyRateDel} from '../../api/rate'
  import moment from 'moment'

  export default {
    name: 'index',
    data() {
      return {
        tableData: [],
        dialogFormVisible: false,
        formLabelWidth: '120px',
        form: {}
      }
    },
    created() {
      this.getList()
    },
    mounted() {

    },
    methods: {
      getList() {
        RoyaltyRateList({ page: 1 }).then(res => {
          this.tableData = res.data.list
        })
      },
      submit() {
        let data = {
          BeginTime: moment(this.form.BeginTime).format('YYYY-MM-DD'),
          EndTime: moment(this.form.EndTime).format('YYYY-MM-DD'),
          RoyaltyRate: this.form.RoyaltyRate.toString()
        }

        if ((this.form.RoyaltyRate <= 100) && (this.form.RoyaltyRate >= 0)) {

          RoyaltyRateEdit(data).then(res => {
            if (res.code == 0) {
              this.$message({
                message: res.data,
                type: 'success'
              })

              this.getList()

              setTimeout(() => {
                this.dialogFormVisible = false
              }, 500)

            }

          })

        } else {

          this.$message({
            message: '请输入合法的数据',
            type: 'warning'
          })

          setTimeout(() => {
            this.dialogFormVisible = false
          }, 500)

        }

      },
      del(row){
        RoyaltyRateDel({id:row.id}).then(res=>{
          console.log('res',res)
          if(res.code == 0){

            this.$message({
              message: '删除成功',
              type: 'success'
            })

            this.getList()

          }else{

            this.$message({
              message: '删除失败',
              type: 'warning'
            })

          }

        })
      }
    }
  }
</script>

<style scoped>
  .add {
    margin-bottom: 20px;
  }
</style>
